<template>

  <div>
    <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#20222a"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-submenu class="layout-header-submenu-headPortrait" index="2">
        <template slot="title">
          <img class="layout-header-headPortrait" src="https://goss.veer.com/creative/vcg/veer/800water/veer-123529917.jpg"/>
        </template>
        <el-menu-item index="2-1">主页</el-menu-item>
        <el-menu-item index="2-2">修改密码</el-menu-item>
        <el-menu-item index="2-3">清空缓存</el-menu-item>
        <el-menu-item index="logout">退出系统</el-menu-item>
      </el-submenu>
      <el-menu-item class="layout-header-submenu" @click="handleFullScreen">
        <el-tooltip effect="dark" :content="fullscreen ? `取消全屏`:`全屏`" placement="bottom">
          <i class="el-icon-rank"></i>
        </el-tooltip>
      </el-menu-item>
      <el-menu-item class="layout-header-submenu" index="3" disabled>消息中心</el-menu-item>
      <el-menu-item class="layout-header-submenu" index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
    </el-menu>
  </div>

</template>

<script>
  export default {
    name: 'layout-header',
    data(){
      return {
        activeIndex2: '1',
        fullscreen: false
      }
    },
    methods:{
      handleSelect(key, keyPath) {
        if (key === 'logout') {
          window.localStorage.setItem("access_token","")
          this.$store.commit('clear_options','')
          this.$router.push({
            path: '/login'
          })
        }
      },
      /**
       * 全屏
       * */
      handleFullScreen(){
        let element = document.documentElement;
        if (this.fullscreen) {
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          }
        } else {
          if (element.requestFullscreen) {
            element.requestFullscreen();
          } else if (element.webkitRequestFullScreen) {
            element.webkitRequestFullScreen();
          } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
          } else if (element.msRequestFullscreen) {
            // IE11
            element.msRequestFullscreen();
          }
        }
        this.fullscreen = !this.fullscreen;
      },
    }
  }
</script>

<style scoped>
  .layout-header-submenu-headPortrait{
    width: 100px;
    text-align: center;
    float: right;


  }
  .layout-header-submenu{
    width: 80px;
    text-align: center;
    float: right;


  }
  .layout-header-headPortrait-container .el-submenu__title{


  }
  .layout-header-headPortrait{
    width: 100%;
    height: 100%;
    border-radius: 50px;
  }
</style>
